<!doctype html>

<head>
    <meta charset="utf-8">
    <title>Géoloc indoor</title>

	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
	<style>#slider { margin: 10px; }	</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.1/svg.js"></script>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
	<h1 id="P1"></h1>
	<h1 id="P2"></h1>
	<h1 id="P3"></h1>
	<h1 id="P4"></h1>
	<h1 id="P5"></h1>
	<h1 id="P6"></h1>
	<h1 id="P7"></h1>

	<p id="m1"></p>
	<p id="m2"></p>

	<div id="drawing">

	</div>

	<div id="slider1">

	</div>

	<div id="slider2">

	</div>


	<script>



		var Z1B1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.01,0.305,0.075,0.055,0.14,10.425,5.39,10.205,3.495,4.135,5.57,1.76,2.15,12.475,12.425,15.655,10.495,3.26,0.91,0.34,0.15,0.19,0.22,0.115,0.04,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
		var Z2B1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.025,0.025,2.555,0.285,7.36,13.96,22.155,5.01,22.44,10.31,3.855,1.875,3.18,1,1.395,1.245,0.445,0.54,1.63,0.55,0.095,0.03,0.02,0.01,0.005,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        var Z3B1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.01,0.12,6.17,7.77,11.7,3.5,3.39,13.96,3.86,16.21,30.01,2.03,1.06,0.12,0.06,0.02,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        var Z4B1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.04,6.33,7.71,9.18,15.53,5.32,4.97,2,4.58,0.45,2.68,1.78,7.87,4.38,3.92,5.88,8.05,6.19,1.49,0.72,0.59,0.28,0.06,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        var Z5B1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.01,0.76,2.58,7.81,18,7.69,12.87,9.69,2.57,10,7.47,3.5,4.93,2.15,2.35,4.18,1.55,1,0.59,0.29,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        var Z6B1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.01,0.01,1.15,6.12,6.03,5.28,6.58,5.77,8.93,6.67,2.61,10.2,12.5,4.73,4.67,3.07,5.26,2.43,3.11,0.11,0.27,0.24,0.51,1.47,0.9,0.11,0.17,0.42,0.43,0.16,0.08,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        var Z7B1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.01,0.02,0.04,0.19,17.95,13.14,38.23,35.44,12.01,16.67,38.12,3.2,6.65,0.89,1.64,1.63,5.95,1.6,0.51,0.24,0.39,1.39,1.65,2.27,0.15,0.01,0,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        var Dsum = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.01,0.12,6.17,7.77,11.7,3.5,3.39,13.96,3.86,16.21,30.01,2.03,1.06,0.12,0.06,0.02,0.02,0.01,1.16,6.14,6.07,5.47,24.555,18.945,50.06,48.8,29.745,50.16,99.49,26.23,56.745,37.765,27.16,24.825,26.37,9.21,32.52,26,24.42,24.705,17.64,12.38,6.425,2.88,2.23,1.27,0.55,0.05,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

        var Z1B2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.01,10.75,15.07,22.33,18.71,21.22,4.99,6.2,0.6,0.12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
		var Z2B2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.89,22.22,6.83,10.28,19.94,9.97,0.79,4.07,2.36,0.22,0.02,0.48,5.6,4.6,4.55,3.47,2.39,1.07,0.22,0.02,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
		var Z3B2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.02,1,1.89,10.91,13.48,11.69,7.02,9.25,6.51,7.63,3.63,3.92,5.03,5.18,4.7,3.09,1.42,1.73,1.27,0.54,0.09,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        var Z4B2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.001,0.689,0.711,0.927,0.572,0.097,0.236,1.002,0.665,1.253,1.338,0.13,0.433,0.776,0.398,0.304,0.181,0.22,0.065,0.002,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        var Z5B2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.0221,0.0323,0.0245,0.0785,0.1367,0.0322,0.2051,0.1112,0.0918,0.0699,0.0727,0.0469,0.0318,0.016,0.011,0.0085,0.0058,0.0028,0.0002,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
		var Z6B2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.12,9.77,4.66,6.64,10.58,21.51,8.83,13.98,2.5,3.47,2.23,1.5,1.97,1.68,0.66,1.42,0.7,0.91,1.03,1.02,1.1,1.18,0.58,0.63,0.56,0.47,0.25,0.05,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
		var Z7B2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.02,0.01,0.2,0.41,3.51,8.31,10.69,6.33,15.74,4.37,10.4,17.95,10.15,4.4,2.97,1.05,0.74,1.81,0.77,0.14,0.02,0.01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];


		function lisser(T){
		    var A= [];
		    A[0]=(T[0]+T[1])/3
            for (var i = 1; i<T.length -1; i++ ) {
				A[i] = (T[i-1] + T[i] + T[i+1])/3;
            }
            A[T.length-1] = (T[T.length-1]+T[T.length-2])/3

			return A;
		}

		A1 = lisser(Z1B1);
		A2 = lisser(Z2B1);
		A3 = lisser(Z3B1);
		A4 = lisser(Z4B1);
		A5 = lisser(Z5B1);
		A6 = lisser(Z6B1);
		A7 = lisser(Z7B1);

		B1 = lisser(Z1B2);
		B2 = lisser(Z2B2);
		B3 = lisser(Z3B2);
		B4 = lisser(Z4B2);
		B5 = lisser(Z5B2);
		B6 = lisser(Z6B2);
		B7 = lisser(Z7B2);

        var mesure = 70;

        var draw = SVG('drawing').size(1300,1000);
		draw.rect(1300, 1000).fill('#E0E0E0').stroke('#000000').stroke({width:20});
		draw.line(500,0,500,500).stroke('#000000').stroke({width:10});
		draw.line(150,500,500,500).stroke('#000000').stroke({width:10});
		draw.line(700,500,1300,500).stroke('#000000').stroke({width:10});
		draw.line(700,125,1050,125).stroke('#000000').stroke({width:10});
		draw.line(700,250,1050,250).stroke('#000000').stroke({width:10});

		function showCoordinates(x, y){
			draw.circle(30).move(x,y);
		}

		function calculateProbability(zone, m1, m2) {
		    var p;
            switch (zone) {
				case 1:
				    p = A1[m1]*(B1[m2]);
				    break;
				case 2:
				    p = (A2[m1])*(B2[m2]);
				    break;
				case 3:
				    p = (A3[m1])*(B3[m2]);
				    break;
				case 4:
				    p = (A4[m1])*(B4[m2]);
				    break;
				case 5:
				    p = (A5[m1])*(B5[m2]);
				    break;
				case 6:
				    p = (A6[m1])*(B6[m2]);
				    break;
				case 7:
				    p = (A7[m1])*(B7[m2]);
				    break;
            }
            return p/(calculateSum(m1,m2));
		}

		function calculateSum(m1, m2){
		    return (A1[m1])*(B1[m2]) +
				(A2[m1])*(B2[m2]) +
				(A3[m1])*(B3[m2]) +
                (A4[m1])*(B4[m2]) +
                (A5[m1])*(B5[m2]) +
                (A6[m1])*(B6[m2]) +
                (A7[m1])*(B7[m2]);
		}


        var zone1 = draw.rect(400,300).move(850,550).fill("#FF0000").opacity(calculateProbability(1,70));
        var zone2 = draw.rect(100,300).move(100,600).fill("#FF0000").opacity(calculateProbability(2,70));
        var zone3 = draw.rect(200,100).move(500,700).fill("#FF0000").opacity(calculateProbability(3,70));
        var zone4 = draw.rect(300,100).move(100,100).fill("#FF0000").opacity(calculateProbability(4,70));
        var zone5 = draw.rect(200,200).move(500,0).fill("#FF0000").opacity(calculateProbability(5,70));
        var zone6 = draw.rect(200,200).move(500,400).fill("#FF0000").opacity(calculateProbability(6,70));
        var zone7 = draw.rect(200,100).move(200,900).fill("#FF0000").opacity(calculateProbability(7,70));
		function colorZones(m1, m2){
		    zone1.opacity(calculateProbability(1,m1,m2));
		    zone2.opacity(calculateProbability(2,m1,m2));
		    zone3.opacity(calculateProbability(3,m1,m2));
		    zone4.opacity(calculateProbability(4,m1,m2));
		    zone5.opacity(calculateProbability(5,m1,m2));
		    zone6.opacity(calculateProbability(6,m1,m2));
		    zone7.opacity(calculateProbability(7,m1,m2));
		}

		colorZones(parseInt(window.location.search.substr(4,2)),parseInt(window.location.search.substr(10,2)));
		//colorZones(70,80);


        $("#slider1").slider();
        $("#slider1").slider("value", 70);
        $("#slider1").slider({
			slide: function(event, ui){
            			colorZones(ui.value, $("#slider2").slider("value"));

                document.getElementById("P1").innerHTML = calculateProbability(1,ui.value, $("#slider2").slider("value"));
                document.getElementById("P2").innerHTML = calculateProbability(2,ui.value, $("#slider2").slider("value"));
                document.getElementById("P3").innerHTML = calculateProbability(3,ui.value, $("#slider2").slider("value"));
                document.getElementById("P4").innerHTML = calculateProbability(4,ui.value, $("#slider2").slider("value"));
                document.getElementById("P5").innerHTML = calculateProbability(5,ui.value, $("#slider2").slider("value"));
                document.getElementById("P6").innerHTML = calculateProbability(6,ui.value, $("#slider2").slider("value"));
                document.getElementById("P7").innerHTML = calculateProbability(7,ui.value, $("#slider2").slider("value"));

                document.getElementById("m1").innerHTML = ui.value;
					}});

        $("#slider2").slider();
        $("#slider2").slider("value", 80);
        $("#slider2").slider({
            slide: function(event, ui){
                colorZones(ui.value, $("#slider1").slider("value"));

                document.getElementById("P1").innerHTML = calculateProbability(1,ui.value, $("#slider1").slider("value"));
                document.getElementById("P2").innerHTML = calculateProbability(2,ui.value, $("#slider1").slider("value"));
                document.getElementById("P3").innerHTML = calculateProbability(3,ui.value, $("#slider1").slider("value"));
                document.getElementById("P4").innerHTML = calculateProbability(4,ui.value, $("#slider1").slider("value"));
                document.getElementById("P5").innerHTML = calculateProbability(5,ui.value, $("#slider1").slider("value"));
                document.getElementById("P6").innerHTML = calculateProbability(6,ui.value, $("#slider1").slider("value"));
                document.getElementById("P7").innerHTML = calculateProbability(7,ui.value, $("#slider1").slider("value"));

                document.getElementById("m2").innerHTML = ui.value;
            }});

	</script>
</body>